<!DOCTYPE html>
<html>
<head>
	<title>Canvas Demo</title>
	    <style>
      #myCanvas {
        border: 1px solid #000;
      }
    </style>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<script>
		let canvas = document.getElementById("myCanvas");
		let ctx = canvas.getContext("2d");
		canvas.width = 400;
		canvas.height = 800;
        let jsonData =   [
    {
      "nodeX": 0,
      "nodeY": 0,
      "length": 214,
      "width": 31,
      "nodeEndX": 214,
      "nodeEndY": 31,
      "isOrder": true,
      "area": 6634
    },
    {
      "nodeX": 0,
      "nodeY": 31,
      "length": 58,
      "width": 24,
      "nodeEndX": 58,
      "nodeEndY": 55,
      "isOrder": true,
      "area": 1392
    },
    {
      "nodeX": 0,
      "nodeY": 55,
      "length": 219,
      "width": 57,
      "nodeEndX": 219,
      "nodeEndY": 112,
      "isOrder": true,
      "area": 12483
    },
    {
      "nodeX": 0,
      "nodeY": 112,
      "length": 91,
      "width": 21,
      "nodeEndX": 91,
      "nodeEndY": 133,
      "isOrder": true,
      "area": 1911
    },
    {
      "nodeX": 0,
      "nodeY": 133,
      "length": 99,
      "width": 100,
      "nodeEndX": 99,
      "nodeEndY": 233,
      "isOrder": true,
      "area": 9900
    },
    {
      "nodeX": 0,
      "nodeY": 233,
      "length": 134,
      "width": 71,
      "nodeEndX": 134,
      "nodeEndY": 304,
      "isOrder": true,
      "area": 9514
    },
    {
      "nodeX": 0,
      "nodeY": 304,
      "length": 97,
      "width": 69,
      "nodeEndX": 97,
      "nodeEndY": 373,
      "isOrder": true,
      "area": 6693
    },
    {
      "nodeX": 97,
      "nodeY": 304,
      "length": 179,
      "width": 75,
      "nodeEndX": 276,
      "nodeEndY": 379,
      "isOrder": true,
      "area": 13425
    },
    {
      "nodeX": 58,
      "nodeY": 31,
      "length": 143,
      "width": 24,
      "nodeEndX": 201,
      "nodeEndY": 55,
      "isOrder": true,
      "area": 3432
    },
    {
      "nodeX": 99,
      "nodeY": 112,
      "length": 156,
      "width": 119,
      "nodeEndX": 255,
      "nodeEndY": 231,
      "isOrder": true,
      "area": 18564
    },
    {
      "nodeX": 219,
      "nodeY": 0,
      "length": 113,
      "width": 90,
      "nodeEndX": 332,
      "nodeEndY": 90,
      "isOrder": true,
      "area": 10170
    },
    {
      "nodeX": 255,
      "nodeY": 90,
      "length": 78,
      "width": 77,
      "nodeEndX": 333,
      "nodeEndY": 167,
      "isOrder": true,
      "area": 6006
    },
    {
      "nodeX": 134,
      "nodeY": 231,
      "length": 159,
      "width": 30,
      "nodeEndX": 293,
      "nodeEndY": 261,
      "isOrder": true,
      "area": 4770
    },
    {
      "nodeX": 276,
      "nodeY": 261,
      "length": 77,
      "width": 105,
      "nodeEndX": 353,
      "nodeEndY": 366,
      "isOrder": true,
      "area": 8085
    },
    {
      "nodeX": 255,
      "nodeY": 167,
      "length": 179,
      "width": 61,
      "nodeEndX": 434,
      "nodeEndY": 228,
      "isOrder": true,
      "area": 10919
    },
    {
      "nodeX": 333,
      "nodeY": 0,
      "length": 152,
      "width": 101,
      "nodeEndX": 485,
      "nodeEndY": 101,
      "isOrder": true,
      "area": 15352
    },
    {
      "nodeX": 353,
      "nodeY": 228,
      "length": 142,
      "width": 103,
      "nodeEndX": 495,
      "nodeEndY": 331,
      "isOrder": true,
      "area": 14626
    },
    {
      "nodeX": 434,
      "nodeY": 101,
      "length": 113,
      "width": 113,
      "nodeEndX": 547,
      "nodeEndY": 214,
      "isOrder": true,
      "area": 12769
    },
    {
      "nodeX": 495,
      "nodeY": 214,
      "length": 70,
      "width": 109,
      "nodeEndX": 565,
      "nodeEndY": 323,
      "isOrder": true,
      "area": 7630
    },
    {
      "nodeX": 0,
      "nodeY": 373,
      "length": 50,
      "width": 23,
      "nodeEndX": 50,
      "nodeEndY": 396,
      "isOrder": true,
      "area": 1150
    },
    {
      "nodeX": 547,
      "nodeY": 0,
      "length": 114,
      "width": 118,
      "nodeEndX": 661,
      "nodeEndY": 118,
      "isOrder": true,
      "area": 13452
    },
    {
      "nodeX": 50,
      "nodeY": 379,
      "length": 215,
      "width": 21,
      "nodeEndX": 265,
      "nodeEndY": 400,
      "isOrder": true,
      "area": 4515
    },
    {
      "nodeX": 547,
      "nodeY": 118,
      "length": 116,
      "width": 93,
      "nodeEndX": 663,
      "nodeEndY": 211,
      "isOrder": true,
      "area": 10788
    },
    {
      "nodeX": 565,
      "nodeY": 211,
      "length": 107,
      "width": 84,
      "nodeEndX": 672,
      "nodeEndY": 295,
      "isOrder": true,
      "area": 8988
    },
    {
      "nodeX": 353,
      "nodeY": 331,
      "length": 156,
      "width": 67,
      "nodeEndX": 509,
      "nodeEndY": 398,
      "isOrder": true,
      "area": 10452
    },
    {
      "nodeX": 565,
      "nodeY": 295,
      "length": 78,
      "width": 79,
      "nodeEndX": 643,
      "nodeEndY": 374,
      "isOrder": true,
      "area": 6162
    },
    {
      "nodeX": 643,
      "nodeY": 295,
      "length": 119,
      "width": 51,
      "nodeEndX": 762,
      "nodeEndY": 346,
      "isOrder": true,
      "area": 6069
    },
    {
      "nodeX": 661,
      "nodeY": 0,
      "length": 130,
      "width": 57,
      "nodeEndX": 791,
      "nodeEndY": 57,
      "isOrder": true,
      "area": 7410
    },
    {
      "nodeX": 333,
      "nodeY": 101,
      "length": 91,
      "width": 49,
      "nodeEndX": 424,
      "nodeEndY": 150,
      "isOrder": true,
      "area": 4459
    },
    {
      "nodeX": 134,
      "nodeY": 261,
      "length": 79,
      "width": 41,
      "nodeEndX": 213,
      "nodeEndY": 302,
      "isOrder": true,
      "area": 3239
    },
    {
      "nodeX": 663,
      "nodeY": 57,
      "length": 121,
      "width": 117,
      "nodeEndX": 784,
      "nodeEndY": 174,
      "isOrder": true,
      "area": 14157
    },
    {
      "nodeX": 643,
      "nodeY": 346,
      "length": 109,
      "width": 42,
      "nodeEndX": 752,
      "nodeEndY": 388,
      "isOrder": true,
      "area": 4578
    },
    {
      "nodeX": 672,
      "nodeY": 174,
      "length": 94,
      "width": 46,
      "nodeEndX": 766,
      "nodeEndY": 220,
      "isOrder": true,
      "area": 4324
    },
    {
      "nodeX": 485,
      "nodeY": 0,
      "length": 55,
      "width": 85,
      "nodeEndX": 540,
      "nodeEndY": 85,
      "isOrder": true,
      "area": 4675
    }
  ];
        jsonData.forEach(function(data) {
          /*
		    ctx.lineWidth = 2;
		    ctx.strokeStyle =randomColor();
			
		    ctx.stroke(); 
            ctx.strokeRect(data.nodeX, data.nodeY, data.length, data.width);
			
			*/
			
			ctx.fillStyle = randomColor();
			ctx.fillRect(data.nodeX, data.nodeY, data.length, data.width);
        });
		
		
		function randomColor() {
		   var color = "#";
		   for (var i = 0; i < 6; i++) color+=parseInt(Math.random() * 16).toString(16);		   
		   console.log(color);
		   return color;
		}
	</script>
</body>
</html>